<template>
<div class="wrap-container mt-3">
  <div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn" :class="active === 0?'btn-primary' :'btn-secondary'" @click="onActive(0)">全部</button>
  <button type="button" class="btn" :class="active === 1?'btn-primary' :'btn-secondary'" @click="onActive(1)">已完成</button>
  <button type="button" class="btn" :class="active === 2?'btn-primary' :'btn-secondary'" @click="onActive(2)">未完成</button>
</div>
</div>
</template>

<script>
export default {
  name:'TodoTab',
  emits:['update:active'],
  props:{
    active:{
      default:0,
      required:true,
      typr:Number
    }
 },
 methods:{
   onActive(index){
     if(this.active === index) return
     this.$emit('update:active', index)

   }
 }


}
</script>

<style lang='less' scoped>
.wrap-container{
  width: 400px;
  text-align: center;
}
</style>